<template>
  <div class="detail">

    <section class="address-search py-20 flex-space-between">
      <div @click="back"> < </div>
      <div>订单详情</div>
      <div></div>
    </section>

    <section>
      <div class="bg-img">
        <div class="div-main flex flex-col items-center flex-center">
          <img src="" style="width: 80px; height: 80px; background:#d4d4d4; position: relative; top: -30px">
          <div>
            <h3>店铺名称</h3>
            <div class="flex items-center flex-space-between p-0 m-0">
              <p class="p-0 m-0">启动价: ￥30</p>
              <p class="p-0 m-0">配送费: 0</p>
            </div>
            <p>农业大学职业学院</p>
            <p>店铺电话:13000000000</p>
          </div>
        </div>
      </div>
    </section>


    <section class="flex h-full aside-list mt-160 ">
      <van-sidebar v-model="activeKey" @change="onChange" class="w-30per h-full">
        <van-sidebar-item title="标签名称" />
        <van-sidebar-item title="标签名称" />
        <van-sidebar-item title="标签名称" />
      </van-sidebar>

      <section class="w-full ml-10" >
        <van-card
            num=""
            price="2.00"
            desc="描述信息"
            title="商品标题"
            thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
            @click="isShowHide"
        />
        <van-card
            num=""
            price="2.00"
            desc="描述信息"
            title="商品标题"
            thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
            @click="isShowHide"
        />

      </section>
    </section>



<!--    <van-cell is-link @click="showPopup">展示弹出层</van-cell>-->
    <van-popup v-model="show"  closeable
               position="bottom"
               :style="{ height: '40%' }">
      <div class="flex items-center flex-space-between mt-40 py-40" style="height: 30px">
        <label>牛肉</label>
        <div class="flex items-center">
          <van-stepper v-model="value" />
          <div class="ml-10">￥14</div>
        </div>
      </div>

      <div class="flex items-center flex-space-between mt-20 py-40" style="height: 30px">
        <label>牛肉</label>
        <div class="flex items-center">
          <van-stepper v-model="value" />
          <div class="ml-10">￥14</div>
        </div>
      </div>
      <div class="flex items-center flex-space-between mt-20 py-40" style="height: 30px">
        <label>牛肉</label>
        <div class="flex items-center">
          <van-stepper v-model="value" />
          <div class="ml-10">￥14</div>
        </div>
      </div>

      <van-submit-bar :price="3050" button-text="提交订单" @submit="submit" />
    </van-popup>

    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" />

    <van-popup v-model="show1"
               :style="{ height: '40%', width: '90%'}">
      <div class="py-40">
        <h3>牛肉</h3>
        <div>
          <label>规格</label>
          <div class="mt-10"><span class="border p-5">大份 +2</span></div>
        </div>
      </div>

      <div class="py-40 mt-20">
        <div>
          <label>规格</label>
          <div class="mt-10"><span class="border p-5 bg-1092CA font-fff">微辣</span> <span class="border p-5">中辣</span></div>
        </div>
      </div>

      <div class="flex items-center flex-space-around mt-40">
        <van-button type="default" class="w-30per" @click="show1=false">取消</van-button>
        <van-button type="info" class="w-30per">确认</van-button>
      </div>
    </van-popup>

  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      activeKey: 0,
      show: false,
      value: 1,
      show1:false
    }
  },
  methods: {
    onChange(index) {
      console.log(index);
    },
    onSubmit(){
      this.show = true;
    },
    showPopup() {
      this.show = true;
    },
    isShowHide(){
      this.show1= true;
    },
    submit(){
      this.$router.push('/order')
    },
    back(){
      history.go(-1)
    }
  },
}
</script>

<style lang="less" scoped>
.address-search {
  background-color: #39a9ed;
  display: flex;
  align-items: center;
  height: 50px;
  color: #fff;
  justify-content: space-around;
}
.aside-list{
  height: 100vh !important;
}
.bg-img{
  height: 180px;
  background-color: #d4d4d4;
  .div-main{
    width: 90%;
    margin: 0 auto;
    border: 1px solid #666;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 99;
    position: relative;
    top: 30px;
  }
}
.van-card__num {
  float: right;
  color: #969799;
  font-size: 30px;
  margin-top: -40px;
  color: #fff;
  &:after{
    content: " + ";
    opacity: 1;
    color: #000000;
  }
}
</style>
